<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <a-input-search
          placeholder="原材料名称"
          style="width: 200px"
          v-model:value="ApiData.productName"
          @search="onSearch"
        />
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="productInfo.productName"
        title="原材料名称"
        min-width="200"
      ></vxe-table-column>
      <vxe-table-column title="原材料图片" min-width="100">
        <template #default="{ row }">
          <a-avatar :src="row.productInfo.productImage" />
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="productNum"
        title="退货数量"
        min-width="150"
      ></vxe-table-column>
      <vxe-table-column title="状态" min-width="150">
        <template #default="{ row }">
          <a-button type="danger" ghost size="small">
            {{ row.refundStatus.role }}
          </a-button>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="storehouseInfo.srName"
        title="仓库"
        min-width="150"
      ></vxe-table-column>
      <vxe-table-column
        field="adminInfo.userNickname"
        title="退货人"
        min-width="150"
      ></vxe-table-column>
      <vxe-table-column title="退货时间" min-width="250">
        <template #default="{ row }">
          <a-button type="link">
            {{ tenBitTimestamp(row.updateTime) }}
          </a-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="totalNum"
      @change="onChange"
    />
  </div>
</template>

<script>
import { refundLogByType } from '@/api/log'
import { thirteenBitTimestamp } from '@/utils/index'

export default {
  data() {
    return {
      allAlign: 'center',
      tableData: [],
      ApiData: {
        pageNum: 1,
        pageSize: 10, // 根据物料名称查询
        productName: '', //
        type: '0', //0 全部 1.根据物料名称查询 
      },
      totalNum: 0, //总数居条数
    }
  },
  watch:{
    ApiData:{
      handler(newV,oldV){
        if(newV.productName === ''){
          this.ApiData.type = '0'
          this.getOutLogByType()
        }
      },
      deep:true
    }
  },
  created() {
    this.getOutLogByType()
  },
  methods: {
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.getOutLogByType()
    },
    /**
     * 出库日志
     */
    getOutLogByType() {
      refundLogByType(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.totalNum = res.queryResult.total
      })
    },
    /**
     * 时间撮传话
     */
    tenBitTimestamp(time) {
      return thirteenBitTimestamp(time)
    },
    onSearch(){
      this.ApiData.type = '1'
      this.getOutLogByType()
    }
  },
}
</script>

<style lang="less" scoped>
</style>